﻿<table id="demo" lay-filter="test"></table>

@section scripts{
    <script type="text/javascript">

        var tableIns;
        var form;
        var layer;
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            form = layui.form;
            layer = layui.layer;
            //第一个实例
            tableIns = table.render({
                elem: '#demo'
                /* , height: 312*/
                , method: 'get'
                , url: '/Users/Page' //数据接口
                , where: { name: $("#txt_search").val() }
                , page: true //开启分页
                , limit: 5
                , limits:[5,10,20,50]
                , toolbar: '#mytoolbar'
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'UserID', title: '编号', width: 80 }
                    , { field: 'Name', title: '姓名' }
                    , { field: 'Sex', title: '性别', width: 80, sort: true, }
                    , { field: 'Phone', title: '手机号码', width: 130 }
                    , { field: 'Birthday', title: '出生日期', width: 120, templet: "#birthday" }
                    , { field: 'Status', title: '状态', width: 120, templet: "#status" }
                    , { field: 'RoleName', title: '角色', width: 100 }
                    , { title: '操作', width: 180, templet: "#mytool", fixed: 'right' }
                ]]
                , done: function (res) {
                    console.log(res);
                }
            });

            //头部工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'add':
                        top.layer.open({
                            type: 2,
                            title: null,
                            shadeClose: true,
                            shade: 0.8,
                            area: ['480px', '550px'],
                            content: '/users/create' // iframe 的 url
                        });
                        break;
                    case 'delete':
                        if (checkStatus.data.length < 1) {
                            layer.msg("请选择需要删除的项！", { icon: 0 })
                        } else {
                            //ajax
                            var UsersID = [];
                            var Names = [];
                            checkStatus.data.forEach(function (v) {
                                UsersID.push(v.UserID);
                                Names.push(v.Name);
                            })

                            layer.confirm('确定删除【' + Names + '】么', function (index) {
                                layer.close(index);



                                //向服务端发送删除指令
                                $.ajax({
                                    url: "/ajax/UsersWebService.asmx/DeleteUsersBatch",
                                    type: 'post',
                                    data: JSON.stringify({ UsersID: UsersID }),
                                    dataType: "json",
                                    contentType: "application/json",
                                    success: function (res) {
                                        if (res.d.code == 1) {
                                            layer.msg(res.d.msg, { icon: 6 });
                                            //这里以搜索为例
                                            tableIns.reload({
                                                where: { //设定异步数据接口的额外参数，任意设
                                                    name: $('#txt_search').val()
                                                    //…
                                                }
                                                , page: {
                                                    curr: 1 //重新从第 1 页开始
                                                }
                                            });
                                        } else {
                                            layer.msg(res.d.msg, { icon: 5 });
                                        }
                                    },
                                    error: function (err) {
                                        console.log(err)
                                    }
                                });
                            });

                        }

                        break;
                    case 'search':
                        //这里以搜索为例
                        tableIns.reload({
                            where: { //设定异步数据接口的额外参数，任意设
                                name: $('#txt_search').val()
                                //…
                            }
                            , page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        break;

                };
            });

            //工具条事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                //console.log(data);
                if (layEvent === 'detail') { //查看
                    //do somehing
                }
                else if (layEvent === 'del') { //删除
                    layer.confirm('确定删除【' + data.Name + '】么', function (index) {

                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url: "/Users/Delete/" + data.UserID,
                            type: 'post',
                            data: null,
                            dataType: "json",
                            contentType: "application/json",
                            success: function (res) {
                                if (res.code == 1) {
                                    layer.msg(res.msg, { icon: 6 });
                                    //这里以搜索为例
                                    tableIns.reload({
                                        where: { //设定异步数据接口的额外参数，任意设
                                            name: $('#txt_search').val()
                                            //…
                                        }
                                        , page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                    });
                                } else {
                                    layer.msg(res.msg, { icon: 5 });
                                }
                            },
                            error: function (err) {
                                console.log(err)
                            }
                        });

                    });
                }
                else if (layEvent === 'edit') { //编辑

                    //location.href = "edit.html";

                    top.layer.open({
                        type: 2,
                        title: null,
                        shadeClose: true,
                        shade: 0.8,
                        area: ['480px', '550px'],
                        content: '/Users/Edit/' + data.UserID // iframe 的 url
                    });

                } else if (layEvent === 'LAYTABLE_TIPS') {
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                }
            });

            //表单的开关事件
            form.on('switch(ckStatus)', function (data) {
                console.log(456);
                console.log(data.elem); //得到checkbox原始DOM对象
                console.log(data.elem.checked); //开关是否开启，true或者false
                console.log(data.value); //开关value值，也可以通过data.elem.value得到
                console.log(data.othis); //得到美化后的DOM对象
            });

        });
    </script>

    <!-- 日期模版 -->
    <script type="text/html" id="birthday">
        {{d.Birthday.substr(0,10)}}
    </script>

    <!-- 状态开关模板 -->
    <script type="text/html" id="status">
        {{#  if(d.Status){ }}
        <input type="checkbox" name="xxx" lay-filter="ckStatus" value="{{d.UserID}}" lay-skin="switch" lay-text="ON|OFF" checked>
        {{#  } else { }}
        <input type="checkbox" name="xxx" lay-filter="ckStatus" value="{{d.UserID}}" lay-skin="switch" lay-text="ON|OFF">
        {{#  } }}
    </script>

    <!-- 头部工具栏模版 -->
    <script type="text/template" id="mytoolbar">
        <div class="layui-table-tool-temp">

            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加用户</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">批量删除</button>
            </div>

            <div class="layui-input-inline">
                <input class="layui-input" id="txt_search" style="height:32px;" />
            </div>
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="search">查询</button>
        </div>
    </script>

    <!-- 行内工具模版 -->
    <script type="text/template" id="mytool">
        <div class="layui-table-tool-temp">
            <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">修改</button>
            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
        </div>
    </script>
    }



